date: 2023-09-01
Type: Cours
Projet: Blindcode
Cours: CSSCSS : Les flexbox avancé
Dans le cours précédent, nous avons appris les bases de Flexbox et comment créer des mises en page flexibles. Dans cette leçon, nous allons explorer des fonctionnalités avancées de Flexbox qui offrent un contrôle encore plus précis sur la disposition des éléments.
align-selfLa propriété align-self permet de contrôler l'alignement vertical d'un élément flexible individuellement, ce qui peut être utile pour déplacer un élément par rapport aux autres. Elle accepte les valeurs suivantes :
flex-start : Aligne l'élément en haut du conteneur (par défaut).flex-end : Aligne l'élément en bas du conteneur.center : Aligne l'élément au centre du conteneur.baseline : Aligne l'élément sur la ligne de base du texte.stretch : Étire l'élément pour remplir toute la hauteur du conteneur..element {
align-self: flex-start; /* Exemple d'alignement en haut */
}
align-contentLa propriété align-content contrôle l'alignement vertical de toutes les lignes d'éléments flexibles à l'intérieur du conteneur. Elle est utile lorsque vous avez plusieurs lignes d'éléments flexibles. Les valeurs possibles sont les mêmes que celles de justify-content.
.conteneur {
align-content: center; /* Aligne les lignes au centre */
}
orderLa propriété order permet de changer l'ordre d'affichage des éléments flexibles à l'intérieur du conteneur. Par défaut, tous les éléments ont une valeur order de 0. En changeant cette valeur, vous pouvez modifier l'ordre de l'affichage.
.element {
order: 2; /* Cet élément sera affiché en deuxième position */
}
flex-growLa propriété flex-grow contrôle la capacité d'un élément flexible à "grandir" pour occuper l'espace disponible lorsque la taille du conteneur est plus grande que la somme des tailles des éléments flexibles. En d'autres termes, elle détermine comment l'espace supplémentaire est réparti entre les éléments flexibles.
flex-growLa valeur par défaut de flex-grow est généralement définie à 0 pour tous les éléments flexibles. Cela signifie que ces éléments ne prendront pas d'espace supplémentaire s'il est disponible.
Lorsque flex-grow est défini à une valeur positive, par exemple flex-grow: 1;, l'élément flexible aura la possibilité de prendre une part de l'espace supplémentaire disponible. Plus la valeur est élevée, plus l'élément prendra d'espace.
Si tous les éléments flexibles ont la même valeur de flex-grow, l'espace supplémentaire sera réparti également entre eux.
flex-growImaginez un conteneur flex avec trois éléments flexibles à l'intérieur :
.conteneur {
display: flex;
}
.element {
flex-grow: 1; /* Tous les éléments ont la même valeur de flex-grow */
}
Si le conteneur a de l'espace supplémentaire, chaque élément flexible prendra une part égale de cet espace. Si un élément a une valeur de flex-grow de 2 et les deux autres ont une valeur de 1, l'élément avec flex-grow: 2 prendra deux fois plus d'espace que les autres.
flex-shrinkLa propriété flex-shrink contrôle la capacité d'un élément flexible à "rétrécir" lorsque l'espace disponible est insuffisant pour accueillir tous les éléments flexibles. Elle détermine comment les éléments réduiront leur taille lorsqu'il y a une contrainte d'espace.
flex-shrinkPar défaut, la valeur de flex-shrink est généralement définie à 1 pour tous les éléments flexibles. Cela signifie que les éléments réduiront leur taille proportionnellement si l'espace est insuffisant.
Lorsque flex-shrink est défini à 0, l'élément ne réduira pas sa taille en réponse à une contrainte d'espace. Il maintiendra sa taille initiale.
Si un élément a une valeur de flex-shrink supérieure à 1, il réduira sa taille plus rapidement que les autres éléments lorsqu'il y a une contrainte d'espace.
flex-shrinkSupposons un conteneur flex avec trois éléments flexibles à l'intérieur :
.conteneur {
display: flex;
}
.element {
flex-shrink: 1; /* Tous les éléments ont la même valeur de flex-shrink (valeur par défaut) */
}
Si l'espace disponible est insuffisant pour afficher tous les éléments à leur taille initiale, chaque élément réduira sa taille proportionnellement en fonction de sa valeur de flex-shrink. Si un élément a une valeur de flex-shrink de 2, il réduira sa taille plus rapidement que les autres éléments.
Avec les fonctionnalités avancées de Flexbox, vous avez un contrôle encore plus précis sur la disposition des éléments flexibles. Vous pouvez aligner individuellement les éléments, changer leur ordre d'affichage, et contrôler comment ils réagissent à l'espace disponible.
Expérimentez avec ces propriétés pour créer des mises en page flexibles et réactives qui répondent aux besoins de vos projets web.
créé le 2023-09-01 à 11:20